<template>
  <div class="twochart"></div>
</template>

<script>
// import echarts from 'echarts'
export default {
  name: 'twochart',
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      var myChart = this.$echarts.init(document.querySelector('.twochart'))
      var option = {
        color: [
          '#60cda0',
          '#ed8884',
          '#f60',
          '#9fe6b8',
          '#0096ff',
          '#32c5e9'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          orient: 'vertical',
          top: 10,
          right: -2,
          data: ['中通 2407790', '韵达 1894939', '百世 1695015', '圆通 1660245', '申通 1034396', '其他 12354']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['35%', '45%'],
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 2407790, name: '中通 2407790' },
              { value: 1894939, name: '韵达 1894939' },
              { value: 1695015, name: '百世 1695015' },
              { value: 1660245, name: '圆通 1660245' },
              { value: 1034396, name: '申通 1034396' },
              { value: 12345, name: '其他 12354' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }

}
</script>

<style scoped lang="less">
.twochart{
    width: 100%;
    height: 100%;
    color: #fff;
}
</style>
